<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id='app' v-cloak>
        <!-- 使用插值表达式，渲染数据 -->
        {{msg}}
    </div>
</body>
<!-- 第一步引入vue.js -->
<script src="./V/vue.js"></script>
<script>
    // 前段渲染的三种方式：
    // 1.原生JS拼接字符串 ：基本上就是将数据以字符串的方式拼接到HTML标签中，不同的开发人员，写出来的代码风格差别很大，随着业务的复杂，不利于后期维护
    // 2.使用前段模板引擎 ：是基于art-template的一段代码，与拼接字符串相比，代码规范，拥有自己的一套模板语法规则 缺点：没有提供事件机制
    // 3.使用Vue特有的模板语法 : 插值表达式，指令，事件绑定，属性绑定，样式绑定，分支循环结构


    
    
    // v-cloak的用法：差值表达式存在闪动问题，使用v-cloak指令，原理：先隐藏，替换好值之后在显示最终的值
    // v-cloak指令用法：1.提供样式 [v-cloak]{display:none}2.在差值表达式所在的标签添加v-cloak
    // 原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后，在显示最终的结果



 //    全局变量Vue  
    // 通过new Vue的方式可以获得一个Vue的应用，返回一个对象，称为应用对象或者是Vue.js的对象
    // 每一个Vue的应用都是通过用Vue函数创建一个新的Vue实例开始
    // new Vue的时候需要注意传递一个对象作为参数，有两个非常重要的属性 el 和data

    // 2.new vue实例对象
    // el和data必须写 
    var vm = new Vue({ //大写V
        // el，控制html容器范围
        el:'#app',
        // 放置数据的一个配置项
        data:{
            msg:'Hello Vue'
        }
    })


    

</script>
</html>